<template>
  <div>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      nav-bar-text-color="@white"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 新导航栏 -->
    <!-- <div class="new-nav">
      <div class="inner">
        <ul>
          <li><a href="#" class="first">商品</a></li>
          <li><a href="#">评价</a></li>
          <li><a href="#">详情</a></li>
          <li><a href="#">推荐</a></li>
        </ul>
      </div>
    </div> -->

    <!-- 主图 -->
    <!-- class="main-pic" -->
    <div class="picBox">
      <img v-lazy="$pregImg + details.img" alt="" width="100%" />
    </div>

    <!-- 详情介绍 -->
    <div class="detail">
      <div class="inner">
        <div class="first">
          <!-- 为啥v-if使用不了，只能使用v-show -->
          <div class="wrap">
            <div class="wz1">
              <span>&yen;{{ details.price }}</span>
              <span>&yen;{{ details.market_price }}</span>
            </div>

            <div class="icon">
              <i class="iconfont icon-shoucang1"></i>
              <div>收藏</div>
            </div>
            <p style="width: 100%">{{ details.goodsname }}</p>
            <p>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
            <div class="f2">11.11限时299元起</div>
            <div class="f3">
              <span class="sp11"
                >此商品于2020-11-11,00点结束闪购特卖，品牌闪购专场</span
              >
              <a>
                <span>查看</span>
                <i class="iconfont icon-arrowR"></i>
              </a>
            </div>
          </div>
        </div>

        <div class="second">
          <div class="inner">
            <div class="s1">
              <span>领券</span>
              <div class="r-discount">
                <div>300</div>
                <div>50</div>
                <div>10</div>
              </div>
            </div>
            <div class="s2">
              <span class="fq">分期</span>
              <div>
                <span> 可选3/6/12期 </span>
                <i class="iconfont icon-arrowR"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 固定导航栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="0" />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="0" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- <div class="nav-fix">
      <div class="inner">
        <div class="top">
          <a href="">
            <img
              src="../../assets/images/icon/shortcut/commodify/hotline.png"
              alt=""
            />
            <span>客服</span>
          </a>
          <a href="">
            <img
              src="../../assets/images/icon/shortcut/commodify/store.png"
              alt=""
            />
            <span>店铺</span>
          </a>
          <a href="">
            <img
              src="../../assets/images/icon/shortcut/commodify/shoppingcart.png"
              alt=""
            />
            <span>购物车</span>
          </a>
          <form action="">
            <input type="button" value="加入购物车" class="input1" />
            <input type="button" value="立即购买" class="input2" />
          </form>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
// import { mapGetters, mapActions } from "vuex";
import { addCartList, getDetails } from "../../request/api";
export default {
  data() {
    return {
      num: 1,
      details: {},
      keywords: "",
      // full: [],
    };
  },
  computed: {
    // ...mapGetters({
    //   details: "details/details",
    // }),
  },
  methods: {
    // ...mapActions({
    //   getDetails: "details/detailsActions",
    // }),
    addCart() {
      let params = {
        num: this.num,
        uid: sessionStorage.getItem("user")
          ? JSON.parse(sessionStorage.getItem("user")).uid
          : [],
        goodsid: this.details.id,
      };
      addCartList(params).then((res) => {
        if (res.code === 200) {
          this.$toast.success("添加购物车成功！");
        }
      });
    },
    onClickLeft() {
      // this.full = [];
      // this.full.push(this.$route.fullPath);
      if (this.$route.query.path==="/goodsSearch") {
        this.$router.push({
          path: "/goodsSearch",
          query: {
            keywords: this.keywords,
            path:"/detail"
          },
        });
        this.$toast.success("返回");
      } else {
        this.$toast.success("返回到上一级");
        this.$router.back();
      }
    },
  },
  mounted() {
    // console.log(this.$route);
    this.keywords=this.$route.query.keywords;
    // this.getDetails(this.$route.params.id);
    getDetails({ id: this.$route.params.id }).then((res) => {
      this.details = res.list[0];
    });
     document.title=this.$route.meta.title
  },
};
</script>

<style scoped>
.picBox {
  width: 100vw;
  height: 3.5rem;
}
.picBox img {
  width: 100%;
  height: 100%;
}
.van-goods-action {
  height: 0.8rem;
}
/* * 顶部返回字体样式  */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/deep/ [class*="van-hairline"]::after {
  border: none;
}
/deep/ .van-nav-bar__content {
  height: 49px;
}
</style>